<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'goods' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'goods' }">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>商品添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow>
      <el-alert
        title="新商品添加"
        type="info"
        center
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-steps
        :space="200"
        :active="active"
        finish-status="success"
        align-center
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="添加完成"></el-step>
      </el-steps>

      <el-tabs
        tab-position="left"
        style="transform: translateY(0px)"
        v-model="activeName"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form :model="good" :rules="$rules.good" ref="addGoodForm">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="good.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="good.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_number">
              <el-input v-model="good.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_weight">
              <el-input v-model="good.goods_weight" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-select
                v-model="good.goods_cat"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="firstNextStep()"
                >下一步</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <el-button @click="(active = 0), (activeName = '0')"
            >上一步</el-button
          >
          <el-button type="primary" @click="(active = 2), (activeName = '2')"
            >下一步</el-button
          ></el-tab-pane
        >
        <el-tab-pane label="商品属性" name="2"
          ><el-button @click="(active = 1), (activeName = '1')"
            >上一步</el-button
          >
          <el-button type="primary" @click="(active = 3), (activeName = '3')"
            >下一步</el-button
          ></el-tab-pane
        >
        <el-tab-pane label="商品图片" name="3">
          <div>
            <p>商品图片</p>
            <el-button type="primary" size="small">点击上传</el-button>
          </div>
          <el-button @click="(active = 2), (activeName = '2')"
            >上一步</el-button
          >
          <el-button type="primary" @click="(active = 4), (activeName = '4')"
            >下一步</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4"
          >商品内容
          <div class="quill-editor">
            <QuillEditor>
              v-model="content"
              v-quill:myQuillEditor="editorOption"</QuillEditor
            >
          </div>

          <el-button @click="(active = 3), (activeName = '3')"
            >上一步</el-button
          >
          <el-button type="primary" @click="(active = 5), (activeName = '5')"
            >添加商品</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="添加完成" name="5"
          >><el-button @click="(active = 0), (activeName = '0')"
            >继续添加</el-button
          >
          <router-link
            tag="el-button"
            style="background: #409eff; color: #fff"
            :to="{ name: 'goods' }"
            >返回商品列表</router-link
          >
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
export default {
  components: { QuillEditor: quillEditor },
  data() {
    return {
      active: 0,
      good: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_cat: "",
      },
      activeName: "0",
    };
  },
  methods: {
    //拿到路径里的gid，渲染修改页面
    async showEditPage(gid) {
      try {
        this.loading = true;
        let good = await this.$api.getGoodsListById(gid);
        this.good = good;
        console.log("good1111111122", good);
        if (good == "error") return;
      } catch (error) {
        console.log("UserView-showEditPage-error:", error);
      } finally {
        this.loading = false;
      }
    },
    async firstNextStep() {
      this.active = 1;
      this.activeName = "1";
      await this.$refs.addGoodForm.validate();
    },
  },
  created() {
    let path = location.hash;
    let gid = path.split("edit/")[1];
    console.log(111, path, 22, gid);
    if (gid) {
      this.showEditPage(gid);
    }
  },
};
</script>
<style lang="less" scoped>
.content-top {
  background-color: #f4f4f5;
  text-align: center;
  color: #909399;
  font-size: 13px;
}
.el-steps {
  margin-top: 20px;
}
.el-tabs {
  margin-top: 20px;
}
.el-form {
  margin-left: 20px;
}
.el-tab-pane {
  margin-left: 20px;
  div {
    margin-bottom: 20px;
  }
}
</style>

